﻿@model Matrix.MaKaYunShang.Model.DataStatisticsModels.FullDataStatOrderDetail
@{
    ViewBag.Title = "订单详情";
    ViewBag.PathToBtn = "/GfcStat/OrderDetailList";
    ViewBag.TextBtn = "刷新";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section css{
    <style type="text/css">
        .nav-tabs li {
            cursor: pointer;
        }

        .table hr {
            margin: 5px 0;
            border: dashed 1px #aaa;
        }

        #TransferOrderModal {
            top: 20%;
        }
    </style>
}
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <form>
                    下单时间：<input type="text" class="form-control input-sm form_datetime_order_search" placeholder="开始时间" style="width: 110px;display: inline-block" id="startTime" />
                    --
                    <input type="text" class="form-control input-sm form_datetime_order_search" placeholder="结束时间" style="width: 110px;display: inline-block" id="endTime" />
                    &nbsp;&nbsp;
                    店铺：
                    <input type="text" data-target='#TransferOrderModal' data-toggle='modal' class="form-control input-sm" placeholder="店铺名称" style="width: 150px;display: inline-block" id="shopName" />
                    <input type="tex" id="ShopId" name="ShopId" style=" display:none"/>
                    &nbsp;&nbsp;
                    <input type="reset" value="清空条件" class="btn btn-info" style="margin-left: 10px;" />
                    <a class="btn btn-primary pull-right" style="margin-left: 10px;" id="btnExport">导出</a>
                    <a class="btn btn-primary pull-right" id="btnSearch">查询</a>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                订单详情
            </div>
            <div class="panel-body">
                <div class="dataTable_wrapper">
                    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
                        <thead>
                            <tr>
                                <th>销售时间</th>
                                <th>订单编号</th>
                                <th>微信端支付流水号</th>
                                <th>商品条形码</th>
                                <th>商品名称</th>
                                <th>商品计量单位</th>
                                <th>商品规格</th>
                                <th>销售数量</th>
                                <th>商品单价</th>
                                <th>实收金额</th>
                                <th>立减金额</th>
                                <th>支付方式</th>
                                <th>店铺名称</th>
                                <th>售卖方式</th>

                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="TransferOrderModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">查询店铺（<font color="red">仅显示已激活的店铺</font>）</h4>
            </div>
            <div class="modal-body">
                <div style="margin-bottom: 5px;">
                    <input type="text" class="form-control" placeholder="店铺名称" style="width: 409px;display: inline-block" id="shopKeyWords" />
                    <a class="btn btn-primary" onclick="searchShops();">查询</a>
                </div>
                <div class="table-responsive table-bordered" style="max-height: 250px;">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>店铺名称</th>
                                <th>距离用户（米）</th>
                                <th style="text-align: center">操作</th>
                            </tr>
                        </thead>
                        <tbody id="shopsData"></tbody>
                    </table>
                    <input type="hidden" id="hidOrderId" />
                </div>
            </div>
        </div>
    </div>
</div>
<iframe id="exportOrderFrame" style="display:none "></iframe>
@section javascript{
    <script src="~/Content/admin/dist/js/pagingHelper.js"></script>
    <script type="text/javascript">
        var dataParams = {};
        var serverProcessPath = "/GfcStat/OrderDetailListing";
        var showColumns = [
            { data: "OrderTime" },
            { data: "OrderNo" },
            { data: "WechatTransactionId" },
            { data: "CommodityBarCode" },
            { data: "CommodityName" },
            { data: "CommodityUnit" },
            { data: "CommoditySpec" },
            { data: "Quantity" },
            { data: "UnitPrice" },
            { data: "PayPrice" },
            { data: "RandomPayDiscount" },
            { data: "PayWayDesc" },
            { data: "ShopName" },
            { data: "SellingWay" }

        ];
        pagingHelper.Paging(serverProcessPath, dataParams, showColumns, null, false);
        $("#dataTables-example_wrapper div:first").hide();

        $(function () {
            $('.form_datetime_order_search').datetimepicker({
                format: 'yyyy-mm-dd',
                language: 'zh-CN',
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            });
            $("#btnSearch").click(function () {
                reloadOrder();
            });

            $("#btnExport").click(function () {
                alertify.okBtn("确定").cancelBtn("取消").confirm("将导出当前搜索条件下的所有数据，确定导出吗（导出时间较长，请耐心等候）？", function () {
                    $.post("@Url.Action("ExportExcelStatOrderDetailInfo")" + "?startTime=" + $("#startTime").val() + "&endTime=" + $("#endTime").val() + "&shopId=" + $("#ShopId").val(), {}, function (data) {
                        if (data.Status) {
                            $("#exportOrderFrame").attr("src", data.Message);
                        } else {
                            alertify.alert(data.Message);
                        }
                    });
                });
            });
            searchShops();
        });

        function detail(id) {
            window.location.href = "@Url.Action("Detail")" + "?id=" + id + "&orderStatus=" + $("#hidOrderStatus").val();
        }

        function transfer(id) {
            $("#shopKeyWords").val("");
            $("#hidOrderId").val(id);
            searchShops();
        }

        function selectShop(shopId, name) {
            $("#ShopId").val(shopId);
            $("#shopName").val(name);
            $("#TransferOrderModal").modal("hide");
        }

        function searchShops() {
            $("#shopsData").html("");
            $("#ShopId").val("");
            $("#shopName").val("")
            $.post("@Url.Action("GetShopList")", "keyWords=" + encodeURIComponent($("#shopKeyWords").val()), function (data) {
                if (data.Status) {
                    for (var i = 0; i < data.Data.length; i++) {
                        var OrderName = "'" + data.Data[i].Name + "'";
                        $("#shopsData").append("<tr><td>" + data.Data[i].Name + "</td><td>" + data.Data[i].Distance.toFixed(2) + "</td><td align='center'><a class='btn btn-info' onclick=\"selectShop(" + data.Data[i].Id + "," + OrderName.toString() + ");\">选择</a></td></tr>");
                    }
                } else {
                    alertify.alert(data.Message);
                }
            });
        }

        function reloadOrder() {
            pagingHelper.reloadWithDiffPath("@Url.Action("OrderDetailListing")" + "?startTime=" + $("#startTime").val() + "&endTime=" + $("#endTime").val() + "&shopId=" + $("#ShopId").val())
        }
    </script>
}